import React, { useState } from 'react';

interface PaginationControlsProps {
  totalItems: number;
  onPageChange: (page: number, pageSize: number) => void;
  initialPage?: number;
  initialPageSize?: number;
}

const PaginationControls: React.FC<PaginationControlsProps> = ({
  totalItems,
  onPageChange,
  initialPage = 1,
  initialPageSize = 10
}) => {
  const [currentPage, setCurrentPage] = useState(initialPage);
  const [pageSize, setPageSize] = useState(initialPageSize);

  const totalPages = Math.ceil(totalItems / pageSize);

  // 处理页码变化
  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return;
    setCurrentPage(page);
    onPageChange(page, pageSize);
  };

  // 处理每页显示数量变化
  const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newPageSize = parseInt(event.target.value, 10);
    setPageSize(newPageSize);
    setCurrentPage(1); // 切换每页显示数量时重置为第一页
    onPageChange(1, newPageSize);
  };
  
  // 生成页码数组
  const getPageNumbers = () => {
    const pages = [];
    const maxVisiblePages = 5;
    
    if (totalPages <= maxVisiblePages) {
      // 显示所有页码
      for (let i = 1; i <= totalPages; i++) {
        pages.push(i);
      }
    } else {
      // 显示部分页码
      if (currentPage <= 3) {
        // 当前页靠近开始
        for (let i = 1; i <= 4; i++) {
          pages.push(i);
        }
        pages.push('...');
        pages.push(totalPages);
      } else if (currentPage >= totalPages - 2) {
        // 当前页靠近结束
        pages.push(1);
        pages.push('...');
        for (let i = totalPages - 3; i <= totalPages; i++) {
          pages.push(i);
        }
      } else {
        // 当前页在中间
        pages.push(1);
        pages.push('...');
        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
          pages.push(i);
        }
        pages.push('...');
        pages.push(totalPages);
      }
    }
    
    return pages;
  };
  
  // 如果没有数据，不显示分页
  if (totalItems === 0) {
    return null;
  }
  
  return (
    <div className="flex flex-col md:flex-row justify-between items-center gap-4">
      {/* 每页显示数量选择器 */}
      <div className="flex items-center">
        <span className="text-sm text-muted-foreground mr-2">每页显示:</span>
        <select
          className="text-sm border border-input rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-ring"
          value={pageSize}
          onChange={handlePageSizeChange}
        >
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
        </select>
      </div>
      
      {/* 分页导航 */}
      <div className="flex items-center">
        <span className="text-sm text-muted-foreground mr-4">
          显示 {Math.min((currentPage - 1) * pageSize + 1, totalItems)} - {Math.min(currentPage * pageSize, totalItems)} 条，共 {totalItems} 条
        </span>
        
        <nav className="flex items-center">
          {/* 上一页按钮 */}
          <button
            onClick={() => handlePageChange(currentPage - 1)}
            disabled={currentPage === 1}
            className={`px-3 py-1 rounded-l-lg border ${
              currentPage === 1
                ? 'bg-muted text-muted-foreground cursor-not-allowed'
                : 'bg-background text-foreground hover:bg-muted/50'
            }`}
          >
            上一页
          </button>
          
          {/* 页码按钮 */}
          {getPageNumbers().map((page, index) => (
            <React.Fragment key={index}>
              {page === '...' ? (
                <span className="px-3 py-1 border-t border-b text-muted-foreground">...</span>
              ) : (
                <button
                  onClick={() => handlePageChange(page as number)}
                  className={`px-3 py-1 border-t border-b ${
                    page === currentPage
                      ? 'bg-primary text-primary-foreground'
                      : 'bg-background text-foreground hover:bg-muted/50'
                  }`}
                >
                  {page}
                </button>
              )}
            </React.Fragment>
          ))}
          
          {/* 下一页按钮 */}
          <button
            onClick={() => handlePageChange(currentPage + 1)}
            disabled={currentPage === totalPages}
            className={`px-3 py-1 rounded-r-lg border ${
              currentPage === totalPages
                ? 'bg-muted text-muted-foreground cursor-not-allowed'
                : 'bg-background text-foreground hover:bg-muted/50'
            }`}
          >
            下一页
          </button>
        </nav>
      </div>
    </div>
  );
};

export default PaginationControls;
